<template>
  <div>
    <div class="information">
      <div class="font16 fontwBold color333 line22 mb5">{{ detail.name }}</div>

      <add-label
        :lab-info="detail.tagList"
        :someone-data="detail"
        :resident-type="residentType"
        @labelSaveSuccess="labelSaveSuccess"
        v-if="$route.name !== 'zengYuanLieBiao'"
      ></add-label>

      <div class="flex pt20 pb20">
        <div class="mr60">
          <div class="font14 color999 pb10 line20">联系电话</div>
          <div class="font14 color333 line20">
            {{ detail.phone ? detail.phone : "-" }}
          </div>
        </div>
        <div class="mr60">
          <div class="font14 color999 pb10 line20">身份证号</div>
          <div class="font14 color333 line20">
            {{ detail.idCard ? detail.idCard : "-" }}
          </div>
        </div>
      </div>
    </div>
    <div class="drawer-tit" v-if="showOrder">缴费信息</div>
    <div
      class="mt20"
      style="max-height: 330px; overflow: auto; padding: 2px"
      v-if="showOrder && orderList.length"
    >
      <div
        :class="item.orderStatus == 3 || item.returnOrderStatus == 5 ? 'drawer-content pl16 pr16 positionRel infoDisabled' : 'drawer-content pl16 pr16 positionRel'"
        v-for="item in orderList"
        :key="item.id"
      >
        <div class="drawer-tit" style="margin-top: 0">
          {{ item.orderType == 1 ? "社保" : "医保" }}
        </div>
        <Row>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">提交时间</span>
            <span class="info color333">{{ item.createDate }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">提交人</span>
            <span class="info color333">{{ item.submitInfo }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">缴费方式</span>
            <span class="info color333" v-show="item.payWay == 1"
              >微信支付</span
            >
            <span class="info color333" v-show="item.payWay == 2"
              >支付宝支付</span
            >
            <span class="info color333" v-show="item.payWay == 3"
              >批量缴费支付</span
            >
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">订单编号</span>
            <span class="info color333">{{ item.orderNo }}</span>
          </Col>
          <Col span="12" class="mt10">
            <span class="info color666 mr10">订单金额</span>
            <span class="info color333">{{
              Number(item.orderAmount) / 100
            }}</span>
          </Col>
        </Row>
        <img
          src="@/assets/img/yituikuan.png"
          alt=""
          v-if="item.orderStatus == 3 || item.returnOrderStatus == 5"
          class="positionAbsolute"
          style="right: 20px; top: 0; bottom: 0; margin: auto"
        />
      </div>
    </div>
    <empty-data v-if="showOrder && !orderList.length"></empty-data>
    <div
      class="drawer-tit"
      style="display: flex; justify-content: space-between"
    >
      <span>操作日志</span>
      <span style="color: #1577fe; cursor: pointer" @click="spfun"
        >审批记录</span
      >
    </div>
    <div class="drawer-content">
      <BaseTable :columns="columnsLog" :data="operateLogData" :isPage="false">
      </BaseTable>
    </div>
    <base-modal
      :buttonif="false"
      v-model="spkey"
      @closeM="spkey = false"
      titleText="审批记录"
      :styles="{ width: '800px' }"
    >
      <div class="shjlclaa">
        <Timeline>
          <TimelineItem v-for="(item,index) in operateLogData" :key="index">
            <div class="shjlclaa-div">
              <div class="shjlclaa-div-top">增员审核</div>
              <div class="shjlclaa-div-bot">
                <span>张县长</span>
                <span>通过</span>
                <span>2022</span>
              </div>
              <div class="shjlclaa-div-botif">备注12312321</div>
            </div>
          </TimelineItem>
        </Timeline>
      </div>
    </base-modal>
  </div>
</template>

<script>
import BaseModal from "_c/base-modal";
import EmptyData from "_c/empty-data/empty-data";
import addLabel from "./addLabel";

export default {
  components: {
    BaseModal,
    EmptyData,
    addLabel,
  },
  props: {
    detailRequestName: "", // 详情接口
    logRequestName: "", // 操作日志接口
    residentType: "", // 是否居民  1居民
    showOrder: {
      type: Boolean,
      default: true,
    }, //是否展示缴费信息
    // 操作日志列表
    columnsLog: {
      type: Array,
      default() {
        return [
          {
            title: "操作人",
            key: "opterName",
            align: "left",
            width: 140,
            ellipsis: true,
            tooltip: true,
            tooltipTheme: "light",
          },
          {
            title: "内容",
            key: "opterDesc",
            align: "left",
            minWidth: 200,
            ellipsis: true,
            tooltip: true,
            tooltipTheme: "light",
          },
          {
            title: "操作时间",
            key: "operDate",
            align: "left",
            width: 175,
            ellipsis: true,
            tooltip: true,
            tooltipTheme: "light",
          },
        ];
      },
    },
  },
  data() {
    return {
      spkey: false,
      detail: {},
      orderList: [],
      operateLogData: [],
    };
  },
  methods: {
    // 审批记录
    spfun() {
      this.spkey = true;
    },
    getDetail(params, onlyDetail) {
      this.detail = {};
      this.operateLogData = [];
      // 详情
      this.APIS[this.detailRequestName]({ id: params.id }).then((res) => {
        if (res.code == 20000) {
          if (!res.data.tagList && res.data.list) {
            res.data.tagList = res.data.list;
          }
          this.detail = res.data;
        } else {
          this.$Message.error(res.message);
        }
      });
      // if (!onlyDetail) {
      this.getLog(params);
      this.getOrder(params);
      // }
    },
    // 操作日志
    getLog(params) {
      let logData = {};
      if (this.residentType == 1) {
        // 居民操作日志
        logData.id = params.id;
      } else {
        logData.auditId = params.id;
      }
      this.APIS[this.logRequestName](logData).then((res) => {
        if (res.code == 20000) {
          this.operateLogData = res.data;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 缴费信息
    getOrder(params) {
      this.APIS.residentOrder({
        payResidentId: params.redidentId || params.redientId || params.id,
      }).then((res) => {
        if (res.code == 20000) {
          this.orderList = res.data;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //  标签保存成功后加载数据
    labelSaveSuccess(data) {
      this.getDetail(this.detail, true);
      // 重新加载列表数据
      this.$emit("labelSaveSuccess", true);
    },
  },
};
</script>

<style scoped lang="less">
/deep/.ivu-modal-header{
  border-bottom: 1px solid #e8eaec;
}
/deep/.ivu-timeline-item-tail{
  top: 40% !important;
  height: 87% !important;
  margin-top: 2.5% !important;
  border: 1px solid #0085FF;
}
/deep/.ivu-timeline-item-head{
  top: 40% !important;
  border: 2px solid #2d8cf0 !important;
}
.shjlclaa {
  height: 600px;
  padding: 0 40px;
  overflow: auto;
  .shjlclaa-div{
    border-radius: 10px;
    // height: 102px;
    background: #F8F8F8;
    border-radius: 8px;
    padding: 0 18px 20px 18px;
    .shjlclaa-div-top{
      padding-top: 24px;
      font-size: 16px;
      font-weight: 600;
    }
    .shjlclaa-div-bot{
      padding-top: 16px;
      font-size: 14px;
      font-weight: 400;
    }
    .shjlclaa-div-botif{
      padding-top: 8px;
      font-size: 14px;
    }
  }
}
.information {
  border-bottom: 1px solid #eeeeee;
  margin-left: -20px;
  margin-right: -20px;
  padding: 0 20px;
}

.drawer-tit {
  font-weight: bold;
  color: #333333;
  line-height: 20px;
  margin-top: 20px;
}

.drawer-content {
  margin-top: 20px;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);

  .info {
    font-size: 12px;
    line-height: 17px;
  }

  /deep/ .ivu-card {
    padding: 0;
  }
}

.drawer-content:first-child {
  margin-top: 0;
}

.infoDisabled {
  div,
  span {
    color: #999999;
  }
}

/deep/ .ivu-modal-footer {
  padding: 0;
}
</style>
